<template>
  <div>
    <div class="keywords-box" @click="showInput">
      <el-tag :key="tag" v-for="tag in dynamicTags" type="info" closable :disable-transitions="false"
              @close="handleClose(tag)">
        <span>{{ tag }}</span>
      </el-tag>
      <el-input class="input-new-tag" v-model="inputValue" ref="saveTagInput" size="small"
                @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" :style="{ width: inputWidth + 30 + 'px' }">
      </el-input>
      <div class="inputWidth-box" ref="inputWidth">{{ inputValue }}</div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'SEOkeywords',
    props: {
        value: {
            type: Array,
            default: () => ([])
        }
    },
    data () {
        return {
            dynamicTags: this.value,
            inputValue: '',
            inputWidth: 10
        };
    },
    watch: {
        inputValue (val, oldval) {
            if (val) {
                this.$nextTick(() => {
                    this.inputWidth = this.$refs.inputWidth.offsetWidth;
                });
            }
        }
    },
    methods: {
        handleClose (tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput () {
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm () {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
                this.$emit('input', this.dynamicTags);
            }
            this.inputValue = '';
            this.inputWidth = 10;
        }
    }
};
</script>
<style lang="scss" scoped>
.keywords-box {
  border-radius: 4px;
  border: 1px solid #c5cddb;
  color: #30354d;
  min-height: 20px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  padding: 4px 0;
  line-height: 32px;

}
.inputWidth-box {
  width: auto;
  display: inline-block;
  position: absolute;
  top: -50px;
}
</style>
<style lang="scss">
.keywords-box .el-tag.el-tag--info {
  margin-left: 4px !important;
  padding: 0 4px;
  height: 26px;
  line-height: 26px;
  font-size: 0;
  vertical-align: top;
  border: 0;
  span{
    height: 26px;
    display: inline-block;
    max-width: 100px!important ;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align: middle;
    font-size: 12px;
  }
  .el-icon-close{
    right: 0;
    vertical-align: middle;

  }
}
.keywords-box .input-new-tag {
  margin-top: 0px !important ;
  margin-left: 4px!important ;
  vertical-align: top;
  height: 26px;
  input {
    width: 100%;
    height: 26px;
    border: 0;
    padding: 0;
    vertical-align: top;

  }
}
</style>
